<template>
  <div>
    <h1>快速编辑</h1>
    <Vue3JsonEditor
      v-model="state.json"
      :show-btns="true"
      :expandedOnStart="true"
      @json-change="onJsonChange"
      @json-save="onSave"
      @has-error="onError"/>

      <div>{{errorStr}}</div>
  </div>
</template>

<script lang="ts" setup>
import useStoreStu from '~/store/stu'
import { ElMessage } from 'element-plus';
import { stat } from 'fs';
import { defineComponent, reactive, ref } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'
import { StorageCon } from '~/constant';

const storeStu = useStoreStu()
function onJsonChange (value) {
    console.log('value:', value)
    errorStr.value = ''
}
const errorStr = ref('')
const state = reactive({
    json: JSON.parse(localStorage.getItem(StorageCon.stu))
})
const onError = (err) => {
    console.log(err)
    errorStr.value = err
}
const onSave = (v) => {
    storeStu.save(v)
    // localStorage.setItem(StorageCon.stu, JSON.stringify(v))
    ElMessage.success('保存成功')
}
</script>